<template>
	<gui-page>
		<template v-slot:gBody>
			<view style="background-color: #fff;">
				<!-- 头像与我的模块 -->
				<view class="mine">
					<view class="gui-margin-top-large gui-padding">
						<text class="gui-h4 gui-bold" >{{ $t("tabBar.me") }}</text>
					</view>
					<view class="login-langType" style="width:200rpx;">
						<gui-segmented-control :items="cates" :current="langIndex" borderRadius="40rpx"
							customStyle="border-radius:40rpx;height:40rpx;" @change="switchLanguage">
						</gui-segmented-control>
					</view>
					<view class="gui-list gui-padding" style="padding-bottom:70rpx">
						<view class="gui-list-items">
							<view class="gui-list-image ucenter-face gui-relative">
								<image class="gui-list-image ucenter-face-image"
									src="http://screen.bjdnlsj.com/afl-app/img/202208291422350498_admin.png"
									mode="widthFix"></image>
							</view>
							<view class="gui-list-body">
								<view class="gui-list-title">
									<text class="gui-list-title-text "
										>{{ data.userInfo.name }}</text>
								</view>
								<text class="gui-list-body-desc " >{{ data.userInfo.orgName }}</text>
							</view>
							<!-- <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text> -->
						</view>
					</view>
				</view>

				<view class="gui-list gui-margin-top gui-padding-x">
					<view class="gui-list-items" @click="goPage('/pages/setting/user')">
						<!-- <text class="gui-list-icon gui-icons gui-color-blue">&#xe60d;</text> -->
						<image class="item-icon" src="@/static/set/user.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{ $t("navigationBar.userinfo") }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="goPage('/pages/setting/equipment')">
						<!-- <text class="gui-list-icon gui-icons gui-color-green">&#xe612;</text> -->
						<image class="item-icon" src="@/static/set/equipment.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{ $t("navigationBar.facilityInformation") }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="goPage('/pages/setting/changePassword')">
						<!-- <text class="gui-list-icon gui-icons gui-color-orange">&#xe624;</text> -->
						<image class="item-icon" src="@/static/set/password.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{ $t("navigationBar.changePassword") }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="goPage('/pages/setting/warehouse')">
						<!-- <text class="gui-list-icon gui-icons gui-color-red">&#xe687;</text> -->
						<image class="item-icon" src="@/static/set/warehouse.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{ $t("navigationBar.warehouseSetting") }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
				</view>
				<view class="gui-padding-x">
					<view class="gui-list-items" @click="goPage(`/pages/setting/printer`)">
						<!-- <text class="gui-list-icon gui-icons gui-color-yellow">&#xe613;</text> -->
						<image class="item-icon" src="@/static/set/printer.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{ $t("navigationBar.printerSetting") }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="serveSeting">
						<!-- <text class="gui-list-icon gui-icons gui-color-red">&#xe629;</text> -->
						<image class="item-icon" src="@/static/set/settingUp.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{ $t("navigationBar.serviceSetting") }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="goPage('/pages/setting/about')">
						<!-- <text class="gui-list-icon gui-icons gui-color-red">&#xe629;</text> -->
						<image class="item-icon" src="@/static/set/aboutSoftware.png" alt="" />
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{ $t("navigationBar.aboutSoftware") }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
					<view class="gui-list-items" @click="wgtUrlupload">
						<!-- <text class="gui-list-icon gui-icons gui-color-red">&#xe629;</text> -->
						<image class="item-icon" src="@/static/set/software.png" alt="" />
						<view class="gui-list-body ">
							<view class="gui-list-title">
								<text class="gui-list-title-text">{{ $t("navigationBar.versionUpdating") }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
				</view>
				<view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view>
				<view hover-class="gui-tap" @click="outLogin">
					<text
						class="gui-text-center gui-block-text gui-icons logoff gui-color-gray">&#xe62e;{{ $t("my.exit") }}</text>
				</view>
			</view>



		</template>
	</gui-page>
</template>
<script setup>
import {reLaunch} from '@/utils/routerSkip.js'
import {navigate} from '@/utils/routerSkip.js'
import {getLang} from '@/locale/index';
import {useStore} from "vuex";
import {USERINFO} from '@/constant/index.js'
import {appUpdate} from '@/api/api.js'
import {reactive,ref,onMounted,computed,watch} from "vue";
import {useI18n} from 'vue-i18n';

const {t} = useI18n();
let store = useStore();
let langIndex = ref();
let isAndroid = ref(false);
let langTypes = ["zh-Hans", "en", "es"]
let cates = computed(() => {
	return [t('login.simplified'), t('login.english'),t('login.spain')]
})

let data = reactive({
	// icon: require("@/static/set/user.png"),
	userInfo: {},
	percent: 0
})
onMounted(() => {
	let systemInfo = uni.getSystemInfoSync();
	//判断当前用户机型是否为安卓坏境
	isAndroid.value = systemInfo.platform.toLowerCase() === 'android';
	// let systemInfo = uni.getSystemInfoSync();
	//判断当前用户机型是否为安卓坏境
	isAndroid.value = systemInfo.platform.toLowerCase() === 'android';
	let langType = uni.getLocale()
	langIndex.value = langTypes.findIndex(x => x == langType)
	if (!uni.getStorageSync(USERINFO)) {
		requestData()
	} else {
		data.userInfo = uni.getStorageSync(USERINFO)
		console.log(data.userInfo)
	}
})
const requestData = async () => {
	let token=uni.getStorageSync('token')
	let res = await getCurrentUser(token)
	if (res) {
		data.userInfo = res.data.sysUser
		uni.setStorageSync(USERINFO, data.userInfo);
	} else {
		uni.showToast({
			title: t('JsInternational.userInformationFailed'),
			icon: "none"
		});
	}
}
// 跳转页面
const goPage = (x) => {
	navigate({
		url: x
	})
}
// 语言切换
function switchLanguage(index) {
	let type = langTypes[index];
	// #ifdef APP-PLUS
	if (isAndroid) {
		uni.showModal({
			content: t('login.language-change-confirm'),
			success: (res) => {
				if (res.confirm) {
					langIndex.value = index
					getLang(type)
				}
			}
		})
	} else {
		langIndex.value = index
		getLang(type)
	}
	// #endif
	// #ifndef APP-PLUS
	langIndex.value = index
	getLang(type)
	// #endif
}

// 服务设置
const serveSeting = () => {
	uni.showModal({
		title: t('smashRemoval.warmPrompt'),
		content: t('smashRemoval.reconfiguration'),
		success: function (res) {
			if (res.confirm) {
				store.commit('updateServeSetingBool', 1)
				uni.setStorageSync(USERINFO, {});
				reLaunch({
					url: '/pages/login/login'
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
const outLogin = () => {
	uni.showModal({
		title: t('smashRemoval.warmPrompt'),
		content: t('pageTranslation.exitSystem'),
		success: function (res) {
			if (res.confirm) {
				uni.setStorageSync(USERINFO, {});
				reLaunch({
					url: '/pages/login/login'
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
// 版本更新方法
const wgtUrlupload = () => {
	//系统版本升级判断接口（后台获取服务器）
	// #ifdef APP-PLUS
	/** 锁定屏幕方向 */
	plus.screen.lockOrientation('portrait-primary');
	/** 检测升级 */
	// 取得版本号
	plus.runtime.getProperty(plus.runtime.appid, function (info) {
		// 版本号变量持久化存储
		getApp().globalData.editionnum = info.version; //版本号持久化存储做其它备用
		console.log("当前应用版本：" + info.version + "---" + plus.runtime.version);
		console.log("appid：" + plus.runtime.appid);
		console.log("appid基座版本号：" + plus.runtime.version);
		let data = {
			version: info.version
		}
		
		appUpdate(data).then(res => {
			console.log(res)
			if (res.code == 0) {
				checkVersionToLoadUpdate(info.version, res.data);
			} else {
				uni.showToast({
					title: res.message,
					icon: "none"
				});
			}
		})
	})
	// #endif
}
/**
 * 进行版本型号的比对 以及下载更新请求
 * @param {Object} server_version 服务器最新 应用版本号
 * @param {Object} curr_version 当前应用版本号
 */
const checkVersionToLoadUpdate = (server_version, data) => {

	if (server_version === data.version) {
		uni.showToast({
			title: t('login.version-update'),
			icon: "none"
		});
		return
	}
	if (server_version !== data.version) {
		//TODO 此处判断是否为 WIFI连接状态
		// if (plus.networkinfo.getCurrentType() != 3) {
		// 	uni.showToast({
		// 		title: t('pageTranslation.aNewVersionHasBeen'),
		// 		mask: true,
		// 		duration: 5000,
		// 		icon: "none"
		// 	});
		// 	return;
		// } else {
		// }
		
		uni.showModal({
				title: t('navigationBar.versionUpdating'),
				content: t('pageTranslation.aNewVersionHas'),
				confirmText: t('pageTranslation.updateRightNow'),
				cancelText: t('pageTranslation.goingLate'),
				success: function (res) {
					if (res.confirm) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: t('pageTranslation.aNewVersion'),
							duration: 5000,
						});
						//设置 最新版本apk的下载链接
						var downloadApkUrl = data.downloadApkUrl;
						var dtask = plus.downloader.createDownload(downloadApkUrl, {}, function (d,
							status) {
							// 下载完成
							if (status == 200) {
								plus.runtime.install(plus.io.convertLocalFileSystemURL(d
									.filename), {}, {}, function (error) {
										uni.showToast({
											title: t(
												'pageTranslation.installFail'),
											duration: 1500
										});
									})
							} else {
								uni.showToast({
									title: t('pageTranslation.updateFail'),
									duration: 1500
								});
							}
						});
		
						//加载进度条
						dtask.start();
						var prg = 0;
						var showLoading = plus.nativeUI.showWaiting("正在下载");
						//popup.value.open()
						dtask.addEventListener('statechanged', function (task, status) { //添加下载任务事件监听器
							// 给下载任务设置一个监听 并根据状态 做操作
							switch (task.state) {
								case 1:
									//showLoading.setTitle("正在下载");
									break;
								case 2:
									//showLoading.setTitle("已连接到服务器");
									break;
								case 3:
									prg = parseInt( //下载的进度
										(parseFloat(task.downloadedSize) / parseFloat(task
											.totalSize)) * 100
									);
									//data.percent = prg;
									showLoading.setTitle("版本更新,正在下载" + prg + "% ");
									break;
								case 4:
									plus.nativeUI.closeWaiting(); //关闭系统提示框
									//popup.value.close()
									break;
							}
		
						});
		
		
		
		
					} else if (res.cancel) {
						console.log('稍后更新');
					}
				}
			});
		
	}
}
</script>
<style scoped>
.mine {
	background-image: url('@/static/index/summer.jpg');
	background-size: 100% 100%;
	color: black;

}

::v-deep .gui-segmented-control-item {
	height: 40rpx;
	line-height: 40rpx;
}

.login-langType {
	position: absolute;
	top: 40rpx;
	right: 20rpx;
}

.login-langType {
	position: absolute;
	top: 40rpx;
	right: 20rpx;
}

.ucenter-face {
	width: 100rpx;
	height: 100rpx;
}

.ucenter-face-image {
	width: 100rpx;
	height: 100rpx;
}

.ucenter-line {
	height: 20rpx;
	margin: 16rpx 0;
}

.logoff {
	line-height: 88rpx;
	font-size: 28rpx;
}

.gui-list-title-text {
	line-height: 60rpx;
}

.item-icon {
	height: 45rpx;
	width: 45rpx;
	padding: 15rpx;
}

.gui-primary-colortwo {
	color: #37886c !important;
}
</style>
